import { Meta, Canvas } from '@storybook/addon-docs';

<Meta
  title="Components/Links"
/>

# Links

## Default links

Per default, `<a>` links are not styled and shouldn't be used unstyled.

<Canvas>
<div>
  <a>Link</a> without style
</div>
</Canvas>

## Links in paragraphs

Links included in paragraphs in the main section (`main p a`) are styled though:
<Canvas>
<main>
  <p>Sed luctus pharetra nunc, et egestas <a>metus tempor</a> at. Donec volutpat ex et enim gravida vehicula.</p>
  </main>
</Canvas>

## Force Link appearance

You can add a `.link` class to force the link appearance

<Canvas>
<div>
  <a class="link">Link</a> with style
</div>
</Canvas>

## Negative links

<Canvas style={{ backgroundColor: '#2f4356' }}>
  <a class="link link--negative">Negative Link</a>
</Canvas>

## Links with icons

Use the `.btn btn--link` component and its variants to display a link with an icon.

**Important:** In this case, the additional icon for external links will be ignored.

<a href="?path=/docs/components-button--example#button-links">Read more about Button component</a>

<Canvas>
  <main>
    <p>
      <a href="#" class="btn btn--link" target="_blank">
        <svg viewBox="0 0 24 24" class="btn__icon">
          <path d="m12.3916 20.99951-5.25976-8.42578a5.87365 5.87365 0 1 1 10.53857-.0332zm0-16.167a5.1305 5.1305 0 0 0 -5.125 5.125 5.07366 5.07366 0 0 0 .52 2.25293l4.605 7.373 4.624-7.40625a5.07217 5.07217 0 0 0 .501-2.21972 5.1305 5.1305 0 0 0 -5.125-5.12495zm0 7.418a2.292 2.292 0 1 1 2.292-2.292 2.29476 2.29476 0 0 1 -2.292 2.29198zm0-3.834a1.542 1.542 0 1 0 1.542 1.542 1.54363 1.54363 0 0 0 -1.542-1.54201z" />
        </svg>
        <span class="btn__text">
          Standort auf Karte anzeigen
        </span>
      </a>
    </p>
  </main>
</Canvas>

# External links

## Links in new windows (target="_blank")

**Generally, it is recommanded not to use links with `target="_blank"`**
- See argumentations on [Nielsen Norman Group](https://www.nngroup.com/articles/new-browser-windows-and-tabs/) and [CSS-Tricks](https://css-tricks.com/use-target_blank/)
- The main justified case for opening links in new windows is to avoid the user losing data (work, playing media, form data, etc) in the current window.

## Icon for external text-links

**The use of the external icon is justified in the following cases:**
- the user goes to an other subdmain (xx.admin.ch -> yy.admin.ch)
- the user completely leaves your domain (xx.admin.ch -> example.com)

**To display the external icon, you have the following possibilities:**
- `<a href="..." rel="external"> Link <a>` (sementical way)
- `<a href="..." class="link--external"> Link </a>` (forced way)

<Canvas>
<main>
<p>Sed luctus pharetra nunc, et egestas <a href="http://admin.ch" rel="external">sementical external</a> at. Donec volutpat ex et enim <a href="http://admin.ch" class="link--external">forced external</a> gravida vehicula.</p>
</main>
</Canvas>

## Icon for external cards

**The same rules apply for interactive cards as for text-links**
You'll find a demo of a card with `ExternalLink` in `footerAction` [on the card documentation](?path=/docs/components-card--example).
